<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>index page</title>
</head>
<body>
<h1>测试RESTFul编程风格</h1>
<hr>
<!--RESTFul风格的：查看用户列表-->
<a th:href="@{/user}">查看用户列表</a><br>
<!--RESTFul风格的：根据id查询用户信息-->
<a th:href="@{/user/110}">查询id=100的这个用户信息</a><br>
<!--RESTFul风格的：新增用户信息，新增必须发送POST请求，需要使用form表单-->
<form th:action="@{/user}" method="post">
    用户名：<input type="text" name="username"><br>
    密码：<input type="password" name="password"><br>
    年龄：<input type="text" name="age"><br>
    <input type="submit" value="保存">
</form>
<!--
RESTFul风格的：修改用户信息，修改必须发送PUT请求
要发送PUT请求，首先你必须是一个POST请求
-->
<form th:action="@{/user}" method="post">
<!--    隐藏域-->
    <input type="hidden" name="_method" value="put">

    用户名：<input type="text" name="username"><br>
    密码：<input type="password" name="password"> <br>
    年龄：<input type="text" name="age"><br>
    <input type="submit" value="修改">
</form>
<!--RESTFul风格的：删除用户信息-->
<!--删除必须发送DELETE请求。和PUT请求实现方式相同-->
<!--发送DELETE请求的前提是POST请求，并且需要通过隐藏域提交_method=delete-->
<a th:href="@{/user/120}" onclick="del(event)">删除用户id=120的用户信息</a>
<!--鼠标单击事件绑定del()-->
<form id="delForm" method="post">
    <input type="hidden" name="_method" value="delete">
</form>
<script>
    function del(event){
        //获取表单
        let delForm = document.getElementById("delForm");
        //给form的action赋值
        delForm.action=event.target.href;  //event.target获取当前节点
        //发送POST请求提交表单
        delForm.submit();
        //非常重要，你要阻止超链接的默认行为(阻止超链接跳转)
        event.preventDefault();
    }
</script>

<form th:action="@{/testPage}" method="post">ajax post请求
    <input type="submit" value="提交" id="btn"><br>
</form><br>


<a th:href="@{/user/2}">查找id=1的用户信息</a>
</body>
</html>